<template>
  <view
    class="widget-root"
    :style="{
      padding: `${$px2rpx(styles.padding_top)}rpx ${$px2rpx(
        styles.padding_horizontal
      )}rpx ${$px2rpx(styles.padding_bottom)}rpx`,
      background:
        backgroundImage == ''
          ? styles.root_bg_color
          : `url(${backgroundImage})` +
            (styles.background_repeat == 1 ? 'no-repeat' : 'repeat-y'),
    }"
  >
    <slot></slot>
  </view>
</template>

<script>
export default {
  props: {
    styles: {
      type: [Object, Array],
    },
  },
  computed: {
    backgroundImage() {
      return this.styles.background_image != undefined &&
        this.styles.background_image != ""
        ? this.styles.background_image
        : "";
    },
  },
};
</script>

<style></style>
